<template>
  <div class="bar">
    <div class="right">
      <template v-if="template.update">
        <t-button theme="success" v-if="!template.switch" @click="switchData(true)">
          <template #icon><t-icon name="swap" /></template>
          {{ plugin.t('template.switch_new') }}
        </t-button>
        <t-button theme="default" v-else @click="switchData(false)">
          <template #icon><t-icon name="swap" /></template>
          {{ plugin.t('template.switch') }}
        </t-button>
      </template>
      <t-button theme="primary" :loading="loading" @click="onSave" style="margin-left: 20px">
        <template #icon><t-icon name="check" /></template>
        {{ plugin.t('template.button') }}
      </t-button>
      <t-button v-if="template.has" theme="danger" :loading="loading" @click="onDelete" style="margin-left: 20px">
        <template #icon><t-icon name="delete" /></template>
      </t-button>
    </div>
    <div class="title">
      <t-button theme="default" shape="square" style="margin-right: 10px" @click="$router.back()">
        <template #icon><t-icon name="arrow-left" /></template>
      </t-button> 
      {{ plugin.t('menu.template') }}
    </div>
  </div>
  <div class="plugin-config-template-form">
    <div class="box">
      <div class="left-box" style="width: 270px">
        <img class="image" :src="app.img(data.image)" />
        <div class="name">{{ data.name }}</div>
      </div>
      <div class="bg-box box">
        <div class="title">{{ plugin.t('template.data_title') }}</div>
        <t-form label-align="top">
          <template v-for="(item, key) in data.data" :key="key">
            <t-form-item :label="plugin.t('template.data.' + item.lang)">
              <t-input v-if="item.type == 'input'" v-model="item.value" />
              <t-textarea v-if="item.type == 'text'" v-model="item.value" :autosize="{ minRows: item.rows }" />
              <t-select v-if="item.type == 'select'" v-model="item.value" :multiple="item.multiple ?? false">
                <t-option v-for="option in item.options" :value="option.value" :label="plugin.t('template.data.' + option.label)" />
              </t-select>
            </t-form-item>
          </template>
        </t-form>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import { useRoute } from 'vue-router'
  import app from '@/app'
  import index from '../../index'
  import templateStore from '../../store/template'

  const plugin = index.plugin
  const route = useRoute()
  const store = templateStore.store
  const loading = ref(false)
  const data = ref()
  const template = reactive({
    data: {},
    new: false,
    has: false,
    update: false,
    switch: false
  })

  // 获取模版
  const getData = () => {
    // 模版市场的新模版
    template.new = store.value[route.query.keyword][route.query.index]

    // 取已保存的模版，没使用就用新模版
    template.has = templateStore.has(template.new)
    template.data = template.has ? templateStore.id(template.new.id) : template.new

    // 判断是否有更新
    template.update = templateStore.hasUpdate(template.new)

    // 优先使用老模版
    switchData(false)
  }

  // 切换模版
  const switchData = (n) => {
    const temp = n ? template.new : template.data
    temp.data = typeof temp.data === 'object' ? temp.data : JSON.parse(temp.data)
    data.value = temp
    template.switch = n
  }
  
  // 提交配置
  const onSave = () => {
    loading.value = true
    templateStore.update(data.value).then(res => {
      app.message('success', 'message.' + res.message)
    }).catch(err => {
      app.message('error', 'message.error.' + err.message)
    }).finally(() => {
      loading.value = false
    })
  }

  // 删除
  const onDelete = () => {
    loading.value = true
    templateStore.delete(data.value).then(res => {
      template.has = false
      app.message('success', 'message.' + res.message)
    }).catch(err => {
      app.message('error', 'message.error.' + err.message)
    }).finally(() => {
      loading.value = false
    })
  }

  getData()
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-config-template-form{
    .image{
      width: 240px;
      display:block;
      box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
      border-radius: 6px;
      overflow: hidden;
    }
    
    .title{
      font-size: 16px;
      font-weight: bold; 
      padding-bottom: 20px;
    }

    .name{
      text-align: center;
      font-size: 18px;
      font-weight: bold; 
      padding: 20px 20px 0 0;
    }
  }
</style>